require('./PageFaultarrange.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Group, SelectField, TextField, TextareaField, Button, Boxs, Toast } = SaltUI;
const { HBox, Box } = Boxs;
import Addpersonfield from 'components/addpersonfield'
import { Control } from 'react-keeper'
import { debug } from 'util';
const File = require('images/svg/file.svg');
const Photo = require('images/svg/photo.svg');

class Faultarrange extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            proName: '',
            proNum: '',
            webhook: '',
            pagedata_fallut: {
                proName: '',
                proNum: '',
                webhook: '',
            }
        };
        this.content = {};
        this.data = [
            { name: "故障单号", formOption: 'falutNum' },
            { name: "输入维护工作安排", formOption: 'proArrange' },
        ]
    }
    handleTextChange(name, newValue) {
        if (name == 'falutNum') {
            Actions.fetch(newValue)
        }
        this.setState({
            [name]: newValue
        });
    }
    handleAddpersonCb(names) {
        this.content.spr = names
    }
    handleAddpersonUnionid(unionids) {
        this.content.approvers_id = unionids
    }
    formSubmit() {
        let t = this;
        if ((!this.state.proName && t.state.pagedata_fallut.proName) || (!t.state.proNum && !t.state.pagedata_fallut.proNum)) {
            Toast.show({
                type: "error",
                content: '请输入正确的故障单号'
            })
            return
        }
        if (!this.props.pagedata || !this.content.spr || this.content.spr.length < 2) {
            Toast.show({
                type: 'error',
                content: "请选择两个审批人",
            });
            return
        }
        this.setState({
            proName: this.state.proName ? this.state.proName : this.state.pagedata_fallut.proName,
            proNum: this.state.proNum ? this.state.proNum : this.state.pagedata_fallut.proNum,
            proj_webhook: this.state.webhook ? this.state.webhook : (this.state.pagedata_fallut && this.state.pagedata_fallut.webhook),
        }, () => {
            if (this.props.pagedata) {
                Actions.sendForm({ node: this.data, data: this.state, pagedata: this.props.pagedata, edit: this.props.edit }, this.content, true);
            } else {
                Actions.sendForm({ node: this.data, data: this.state }, this.content, false)
            }
        })
    }

    render() {
        let t = this;
        return (
            <div className="faultarrange myform">
                <Group.List >
                    <TextField
                        label="故障单号"
                        value={t.state.falutNum}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'falutNum')}
                    />
                </Group.List>
                <Group.List >
                    <TextField
                        label="项目名称"
                        className="photoBox"
                        value={t.state.proName ? t.state.proName : (t.state.pagedata_fallut && t.state.pagedata_fallut.proName)}
                        readOnly={true}
                        onSelect={t.handleTextChange.bind(t, 'proName')}
                    />
                    <TextField
                        label="项目编号"
                        value={t.state.proNum ? t.state.proNum : (t.state.pagedata_fallut && t.state.pagedata_fallut.proNum)}
                        readOnly={true}
                        onChange={t.handleTextChange.bind(t, 'proNum')}
                    />
                </Group.List>
                <Group.List >
                    <TextareaField
                        minRows={8} maxRows={10}
                        placeholder="输入维护工作安排"
                        value={t.state.proArrange}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'proArrange')}
                    />
                </Group.List >
                <Group.List>
                    <Addpersonfield
                        label={"发送给：乙方项目负责人"}
                        cb={t.handleAddpersonCb.bind(t)}
                        union={t.handleAddpersonUnionid.bind(t)}
                        approvers={t.state.approvers}
                        approvers_id={t.state.approvers_id}
                        maxLength="10" />
                </Group.List>
                <Button type="primary" className="submitBtn" onClick={t.formSubmit.bind(t)} >提交</Button>
            </div>
        );
    }

    componentWillMount() {
        var pagedata = {};
        if (this.props.pagedata) {
            pagedata.proName = this.props.pagedata.proName.text;
            pagedata.proNum = this.props.pagedata.proNum;
            pagedata.process_id = this.props.pagedata.process_id;
            pagedata.webhook = this.props.pagedata.proj_webhook;
            for (let i = 0; i < this.props.pagedata.node_info.length; i++) {
                for (let j = 0; j < this.data.length; j++) {
                    if (this.props.pagedata.node_info[i].name == this.data[j].name) {
                        if (this.props.pagedata.node_info[i].name == "上传附件" || this.props.pagedata.node_info[i].name == "上传图片") {
                            try {
                                pagedata.upfileName = JSON.parse(this.props.pagedata.node_info[i].value);
                            } catch (e) {
                                pagedata.upfileName = [];
                            }
                        } else {
                            pagedata[this.data[j].formOption] = this.props.pagedata.node_info[i].value;
                        }
                    }
                }
            }
            this.content.change_id = this.props.pagedata.process_id;
            this.content.change_type = this.props.pagedata.changeType;
        }

        Object.assign(this.state, pagedata)
        this.state.pagedata_fallut = {
            proName: '',
            proNum: '',
            webhook: '',
        }
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.pagedata.approvers && nextProps.pagedata.approvers instanceof Array)
            this.setState({
                approvers: nextProps.pagedata.approvers,
                approvers_id: nextProps.pagedata.approvers_id,
            });
        else if (nextProps.pagedata.approvers && typeof nextProps.pagedata.approvers == 'string')
            this.setState({
                approvers: [nextProps.pagedata.approvers],
                approvers_id: [nextProps.pagedata.approvers_id]
            });
        if (nextProps.pagedata.cc_list && nextProps.pagedata.cc_list instanceof Array)
            this.setState({
                cc_list: nextProps.pagedata.cc_list,
                cc_list_id: nextProps.pagedata.cc_list_id
            });
        else if (nextProps.pagedata.cc_list && typeof nextProps.pagedata.cc_list == 'string')
            this.setState({
                cc_list: [nextProps.pagedata.cc_list],
                cc_list_id: [nextProps.pagedata.cc_list_id]
            })
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        this.setState({
            proName: '',
            proNum: '',
            webhook: '',
            pagedata_fallut: {
                proName: '',
                proNum: '',
                webhook: '',
            }
        })
    }
}

reactMixin.onClass(Faultarrange, Reflux.connect(Store));

module.exports = Faultarrange;
